<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tex7</title>
</head>

	<style>
		
		#box{
			width: 500px;
			margin: 20px auto 0px;
			overflow: hidden;
			background: rgba(122,122,122,0.1);
		}

		.header{
			width: 100%;
			text-align: center;
			overflow: hidden;
		}

		.header span{
			margin: 20px auto;
			display: block;	
		}

		.content{
			width: 100%;
			height: 425px;
			background: yellow;
			position: relative;
		}

		.content div img{
			width: 100%;
			height: 100%;
		}

		.mark{
			width: 40px;
			height: 50px;
			top: 50%;
			margin-top: -25px;
			position: absolute;
			background: rgba(255,255,255,0.5);
			color: #fff;
			text-align: center;
			font: 30px/50px "simsun";
		}

		.content div:first-of-type{
			width: 100%;
			height: 100%;
		}

		.content .mark:nth-of-type(2){
			left: 10px;
		}

		.content .mark:last-of-type{
			right: 10px;
		}

		input{
			margin-top: 20px;
		}

	</style>

<body>
	<div id="box">
		<div class="header">
			<input type="button" value="循环切换" onclick="demo(this.value)">
			<input type="button" value="顺序切换" onclick="demo(this.value)">
			<span id="content_text">图片可从最后一张跳转到第一张循环切换</span>
		</div>
		<div class="content">
			<div>
				<img src="img/1.jpg" alt="img1" id="image">
			</div>
			<div onclick="last()" class="mark"><</div>
			<div onclick="next()" class="mark">></div>	
		</div>
	</div>
</body>
</html>

<script>

	function demo(value){
		var span = document.getElementById('content_text');
		if (value == '循环切换') {
			span.innerHTML = '图片可从最后一张跳转到第一张循环切换';
		}else if (value == '顺序切换') {
			span.innerHTML = '图片只能到最后一张或只能到第一张切换';
		}
	}

	function last(){
		var span = document.getElementById('content_text');
		var image = document.getElementById('image');
		var index = image.src.split('/').length - 1;
		var i = parseInt(image.src.split('/')[index]);
			if (i == 1) {
				if (span.innerHTML == '图片可从最后一张跳转到第一张循环切换') {
					i = 5;
				}else if (span.innerHTML == '图片只能到最后一张或只能到第一张切换') {
					alert('已经到第一张了!');
				}
			}else if (i > 1) {
				i -= 1;
			}
			image.src = 'img/' + i + '.jpg';
	}

	function next(){
		var span = document.getElementById('content_text');
		var image = document.getElementById('image');
		var index = image.src.split('/').length - 1;
		var i = parseInt(image.src.split('/')[index]);
			if (i < 5) {
				i += 1;
			}else if (i == 5) {
				if (span.innerHTML == '图片可从最后一张跳转到第一张循环切换') {
					i = 1;
				}else if (span.innerHTML == '图片只能到最后一张或只能到第一张切换') {
					alert('已经到最后一张了!');
				}
			}
			image.src = 'img/' + i + '.jpg';
	}

</script>





